<template>
	<view class="content">
		<image class="shuji" src="/static/tradeImg/shuji.jpg" mode="widthFix" />
		<view class="up1">
			<view class="lf">
				<view class="yanzai">
					<image src="/static/tradeImg/yanzai.png" alt="" />
				</view>
			</view>
			<view class="rg">
				<view class="yonghu">
					<text>用户昵称</text>
				</view>
				<view class="lianxi">
					<text>欢迎喜欢这个宝贝，感兴趣的联系我</text>
				</view>
			</view>
		</view>
		<view class="up2">
			<view class="box1"></view>
			<view class="xiangqing">
				<text>商品详情</text>
			</view>
			<view class="w1">
				<text>广东专插本教材 23级的可用</text>
			</view>
			<view class="jiage">
				<text>￥20</text>
			</view>
			<view class="w3">
				<text>适合23年备考的同学 英语和政治两本 20元两本 附近的自取。</text>
			</view>
		</view>
		<view class="up3">
			<view class="box2"></view>
			<view class="xuexiao">
				<text>商品学校</text>
			</view>
			<view class="w4">
				<text>广东省清远市广东科贸职业学院 (清远校区)</text>
			</view>
		</view>
		<view class="up4">
			<view class="box3"></view>
			<view class="weizhi">
				<text>商品位置</text>
			</view>
			<view class="w5">
				<text>广东科贸职业学院 (清远校区) 1栋10086</text>
			</view>
		</view>
		<view class="up5">
			<view class="box4"></view>
			<view class="jiaoyi">
				<text>交易方式</text>
			</view>
			<view class="w6">
				<text>自提 | 约定交易地点</text>
			</view>
		</view>
		<view class="bottom">
			<view class="iconfont icon-fenxiang1"></view>
			<view class="iconfont icon-aixin1"></view>
			<view class="iconfont icon-chakantiezigengduojubao"></view>
			<view class="weixin">
				<text>微信</text>
			</view>
		</view>
	</view>
</template>

<script></script>

<style>
.shuji {
	height: 260rpx;
}
.yanzai image {
	border-radius: 50%;
	width: 110rpx;
	height: 110rpx;
	margin-right: 40rpx;
}
.up1{
	display: flex;
	align-items: center;
	padding:40rpx 50rpx;
}
.yonghu {
	font-size: 38rpx;
	margin-bottom: 10rpx;
}
.lianxi {
	font-size: 32rpx;
}
.box1 {
	width: 12rpx;
	height: 48rpx;
	background-color: #00dcb6;
	margin: 30rpx 0 0 50rpx;
}
.xiangqing {
	float: right;
	margin: -50rpx 535rpx 0 0;
	font-weight: bold;
	font-size: 34rpx;
}
.w1 {
	font-size: 32rpx;
	margin: 30rpx 0 0 70rpx;
}
.jiage {
	float: right;
	font-size: 32rpx;
	color: red;
	margin: -45rpx 50rpx 0 0;
}
.w3 {
	font-size: 30rpx;
	margin: 15rpx 0 0 70rpx;
	padding-right: 20rpx;
}
.box2 {
	width: 12rpx;
	height: 48rpx;
	background-color: #00dcb6;
	margin: 30rpx 0 0 50rpx;
}
.xuexiao {
	float: right;
	margin: -50rpx 535rpx 0 0;
	font-weight: bold;
	font-size: 34rpx;
}
.w4 {
	font-size: 30rpx;
	margin: 20rpx 0 0 70rpx;
}
.box3 {
	width: 12rpx;
	height: 48rpx;
	background-color: #00dcb6;
	margin: 30rpx 0 0 50rpx;
}
.weizhi {
	float: right;
	margin: -50rpx 535rpx 0 0;
	font-weight: bold;
	font-size: 34rpx;
}
.w5 {
	font-size: 30rpx;
	margin: 20rpx 0 0 70rpx;
}
.box4 {
	width: 12rpx;
	height: 48rpx;
	background-color: #00dcb6;
	margin: 30rpx 0 0 50rpx;
}
.jiaoyi {
	float: right;
	margin: -50rpx 535rpx 0 0;
	font-weight: bold;
	font-size: 34rpx;
}
.w6 {
	font-size: 30rpx;
	margin: 20rpx 0 0 70rpx;
}
.bottom {
	height: 132rpx;
	width: 100%;
	border: 3rpx solid #bebebe;
	margin-top: 40rpx;
	position: fixed;
	bottom: 0rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.icon-fenxiang1 {
	width: 50rpx;
	height: 50rpx;
	/* margin: 18rpx 0 0 40rpx; */
	font-size: 50rpx;
	
}
.icon-aixin1 {
	float: left;
	width: 50rpx;
	height: 50rpx;
	/* margin: -50rpx 0 0 160rpx; */
	font-size: 50rpx;
	
}
.icon-chakantiezigengduojubao {
	/* float: left; */
	width: 50rpx;
	height: 50rpx;
	/* margin: -50rpx 0 0 280rpx; */
	font-size: 50rpx;
	
}
.weixin {
	/* float: right; */
	width: 298rpx;
	height: 70rpx;
	background-color: #e99d42;
	display: flex;
	align-items: center;
	justify-content: center;
	/* margin: -50rpx 50rpx 0 0; */
	border-radius: 10rpx;
}
.weixin text {
	font-size: 32rpx;
	color: white;
}
</style>
